<template>
	<view class="drink-container">
		<view class="charts-box">
			<qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" background="none" />
		</view>
		<view class="choose-type-box">
			<picker class="capacity-picker" @change="bindCapacityPickerChange" :value="capacityPickerOpts.index"
				:range="capacityPickerOpts.array">
				<uni-icons type="circle-filled" size="30" color="#1890FF"></uni-icons>
			</picker>
			<text>{{addData.capacity}}ml</text>
			<picker class="type-picker" @change="bindTypePickerChange" :value="typePickerOpts.index"
				:range="typePickerOpts.array">
				<uni-icons type="fire-filled" size="30" color="#1890FF"></uni-icons>
			</picker>
		</view>
		<view class="button-submit-box">
			<button class="button-target btn-blue" type="primary" @click="minusTargeEvent($event)">-</button>
			<button class="button-submit btn-blue" :disabled="addCapacityButtonDisabled" type="primary"
				@click="addCapacityEvent($event)">{{addData.drinkType}}</button>
			<button class="button-target btn-blue" type="primary" @click="addTargeEvent($event)">+</button>
		</view>
		<uni-list>
		</uni-list>

		<uni-swipe-action>
			<uni-swipe-action-item v-for="(item,index) in dataList" :right-options="options" :show="isOpened"
				:auto-close="true" @click="swipeClick($event, item)">
				<uni-list-item :title="item.createTime"
					:rightText="item.drinkType+'-'+item.capacity+item.unit"></uni-list-item>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="bottom-text-box">
			<text>休息一下，喝点水！</text>
		</view>

		<uni-fab ref="fab" :horizontal="horizontal" :content="content" :vertical="vertical" :direction="direction"
			@trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		getDrinkList,
		getDrinkListToday,
		deleteDrink,
		addDrink
	} from '@/api/record/drink.js'
	export default {
		components: {},
		data() {
			return {
				totalCapacity: 0,
				targetCapacity: 1600,
				isOpened: "none",
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
				addCapacityButtonDisabled: false,
				content: [{
					iconPath: '/static/images/tabbar/info_.png',
					selectedIconPath: '/static/images/tabbar/info_.png',
					text: '历史',
					active: false
				}],
				capacityPickerOpts: {
					index: 6,
					array: [50, 60, 70, 80, 90, 100, 200, 300]
				},
				typePickerOpts: {
					index: 0,
					array: ['水', '豆浆', '牛奶']
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				query: {
					pageSize: 10000
				},
				addData: {
					capacity: 200,
					drinkType: '水',
					unit: 'ml'
				},
				dataList: [{
					capacity: 12,
					createTime: '2023-09-08 23:30:26',
				}],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					update: true,
					animation: true,
					title: {
						name: "0/100ml",
						fontSize: 25,
						color: "#1890ff",
						offsetY: 0
					},
					subtitle: {
						name: "健康饮食",
						fontSize: 15,
						color: "#1890ff",
						offsetY: 0
					},
					extra: {
						gauge: {
							type: "progress",
							width: 20,
							labelColor: "#666666",
							startAngle: 0.75,
							endAngle: 0.25,
							startNumber: 0,
							endNumber: 100,
							labelFormat: "",
							splitLine: {
								fixRadius: -10,
								splitNumber: 10,
								width: 15,
								color: "#FFFFFF",
								childNumber: 5,
								childWidth: 12
							},
							pointer: {
								width: 24,
								color: "auto"
							}
						}
					},
				},
			}
		},
		onLoad() {
			var capacityIndex = uni.getStorageSync('capacityPickerOpts.index');
			if (capacityIndex != '')
				this.capacityPickerOpts.index = parseInt(capacityIndex)
			var typeIndex = uni.getStorageSync('drink.typePickerOpts.index');
			if (typeIndex != '')
				this.typePickerOpts.index = parseInt(typeIndex)
			var targetCapacityStorage = uni.getStorageSync('targetCapacity');
			if (targetCapacityStorage != '')
				this.targetCapacity = parseInt(targetCapacityStorage)

			this.addData.capacity = this.capacityPickerOpts.array[this.capacityPickerOpts.index]
			this.addData.drinkType = this.typePickerOpts.array[this.typePickerOpts.index]
			//this.changeaddData();
			this.initList();
		},
		watch: {
			totalCapacity(newVal, oldVal) {
				if (newVal != oldVal) {
					//this.initChart()
				}
			},
			targetCapacity(newVal, oldVal) {
				if (newVal != oldVal) {
					this.initChart()
				}
			},
			'capacityPickerOpts.index'(newVal, oldVal) {
				this.capacityChangeaddData();
			},
			'typePickerOpts.index'(newVal, oldVal) {
				this.typeChangeaddData();
			}
		},
		methods: {
			fabClick() {

			},
			trigger(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/package/work/drink/history'
				})
			},
			initChart() {
				setTimeout(() => {
					var chartData = {
						categories: [{
							"value": 0.2,
							"color": "#1890ff"
						}, {
							"value": 0.8,
							"color": "#2fc25b"
						}, {
							"value": 1,
							"color": "#f04864"
						}],
						series: [{
							name: "完成率",
							data: this.totalCapacity / this.targetCapacity
						}]
					}
					//this.opts.update = true;
					//this.opts.animation = false;
					//this.opts.duration = 0;
					this.opts.title.name = this.totalCapacity + "/" + this.targetCapacity + "ml";
					console.log(this.opts)
					this.chartData = chartData;
				}, 500)
			},
			initList() {
				var that = this;
				getDrinkListToday(that.query).then(response => {
					that.dataList = response.rows;
					var total = 0;
					for (var item of that.dataList) {
						total += item.capacity;
					}
					that.totalCapacity = total;
					that.addCapacityButtonDisabled = false;
					that.initChart();
				})
			},
			addCapacityEvent(e) {
				var that = this;
				this.addCapacityButtonDisabled = true;
				var total = this.totalCapacity + this.addData.capacity;
				if (total > this.targetCapacity) {
					uni.showToast({
						icon: 'none',
						title: '已经超出目标值，不能添加了！'
					})
					return;
				}
				this.totalCapacity = total;
				addDrink(this.addData).then(response => {
					setTimeout(() => {
						that.initList()
					}, 500);
				});
			},
			swipeClick(e, item) {
				var that = this;
				if (e.content.text == "删除") {
					uni.showModal({
						title: '提示',
						content: '是否要删除该数据！',
						success: function(res) {
							if (res.confirm) {
								deleteDrink(item.drinkId).then(response => {
									that.initList();
								});
							}
						}
					});

				}
			},
			bindCapacityPickerChange(e) {
				this.capacityPickerOpts.index = e.detail.value;
				uni.setStorage({
					key: 'capacityPickerOpts.index',
					data: e.detail.value
				})
			},
			bindTypePickerChange(e) {
				this.typePickerOpts.index = e.detail.value;
				uni.setStorage({
					key: 'drink.typePickerOpts.index',
					data: e.detail.value
				})
			},
			capacityChangeaddData() {
				this.addData.capacity = this.capacityPickerOpts.array[this.capacityPickerOpts.index];
			},
			typeChangeaddData() {
				this.addData.drinkType = this.typePickerOpts.array[this.typePickerOpts.index];
			},
			minusTargeEvent(e) {
				var minusCapacity = 100
				var total = this.totalCapacity;
				if (total > this.targetCapacity - minusCapacity) {
					uni.showToast({
						icon: 'none',
						title: '目标值快小于实际值，不能减低目标值了！'
					})
					return;
				}
				this.targetCapacity -= minusCapacity;
				uni.setStorage({
					key: 'targetCapacity',
					data: this.targetCapacity
				})
			},
			addTargeEvent(e) {
				this.targetCapacity += 100;
				uni.setStorage({
					key: 'targetCapacity',
					data: this.targetCapacity
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hide {
		display: none;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
		background: white;
	}

	.button-submit-box {
		background: white;
		height: 50px;
		text-align: center;
	}

	.button-submit {
		width: 120px;
		height: 36px;
		line-height: 36px;
		border-radius: 25px;
		display: inline-block;
	}

	.button-target {
		width: 36px;
		height: 36px;
		line-height: 36px;
		display: inline-block;
		border-radius: 19px;
		margin: auto 30px;
	}

	.choose-type-box {
		position: relative;
		z-index: 99;
		text-align: center;
		margin-top: -60px;

		text {
			display: inline-block;
			width: 56px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
	}

	.bottom-text-box {
		background-color: white;
		display: block;
		padding-top: 30px;
		height: 100px;
		text-align: center;
		font-size: 18px;
		color: #1890FF;
		font-weight: bolder;
	}

	.capacity-picker,
	.type-picker {
		display: inline-block;
	}

	.btn-blue {
		background-color: #1890FF;
	}

	button[disabled][type=primary] {
		background-color: #1890ffa6;
	}
</style>